/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 11:28:36
 * @Description: 首页-应用工具-已暴雷名单
 */
import React from "react";
import { Pagination, Select, Input, Button } from "antd";
import { observer, inject } from "mobx-react";
import "./style.scss";

const { Option } = Select;
const { Search } = Input;

@inject("GoBustListsStore")
@observer
class GoBustLists extends React.Component {
    state = {
        sourceTypes: [{ name: "全部", id: "all" }, { name: "未知选项", id: "null1" }, { name: "选项未知", id: "null2" }]
    };
    componentDidMount() {
        this.props.GoBustListsStore.getData();
    }
    handleSetNature(type, value) {
        this.props.GoBustListsStore.setNature(type, value);
    }
    render() {
        const { sourceTypes } = this.state;
        const { listsData } = this.props.GoBustListsStore;
        return (
            <div className="go-bust">
                <div className="go-bust-top">
                    <div className="title">APP 暴雷名单</div>
                    <div className="right-opts">
                        <Select
                            style={{ width: 180 }}
                            placeholder="全部"
                            onChange={value => this.handleSetNature("sourceType", value)}
                        >
                            {sourceTypes.map(d => (
                                <Option value={d.id} key={d.id}>
                                    {d.name}
                                </Option>
                            ))}
                        </Select>
                        <div>
                            <Search
                                placeholder="请输入关键字"
                                style={{ width: 220 }}
                                onChange={e => this.handleSetNature("keyWords", e.target.value.trim())}
                                onSearch={() => this.props.GoBustListsStore.getData()}
                            />
                        </div>
                        <Button>+ 添加</Button>
                        <Button>导出 Excel</Button>
                    </div>
                </div>
                <ul className="bust-lists">
                    {listsData.length > 0 &&
                        listsData.map((d, i) => (
                            <li key={`go-bust-${i}`} className="list">
                                <div className="inner">
                                    <img src={d.portrait} alt="" className="portrait" />
                                    <div className="user-name">{d.name}</div>
                                    <div className="text">
                                        暴雷日期&nbsp;&nbsp; <time>{d.time}</time>
                                    </div>
                                    <div className="text">
                                        暴雷事由&nbsp;&nbsp; <span style={{ color: "#ffc165" }}>{d.reason}</span>
                                    </div>
                                </div>
                            </li>
                        ))}
                </ul>
                <div className="table-pagination">
                    <Pagination
                        defaultcurrent={6}
                        total={500}
                        onChange={(page, pageSize) => this.props.GoBustListsStore.changePage(page, pageSize)}
                    />
                </div>
            </div>
        );
    }
}

export default GoBustLists;
